<template>
  <div class="header-top">
    <div class="container">
      <div class="left-option">你好，
          <span @click="login" ref="denglu">登陆</span>
          <span class="person" ref="person" @click="goLogin">个人中心</span>
          | <span @click="register" ref="zhuce">免费注册</span> <span class="logout" ref="logout" @click="logout">注销</span></div>
      <div class="right-option">
          <span>认证为医生 | </span>
          <span>注册医院账号 | </span>
          <span>联系我们          </span>
          <span class="download-app">
            <Icon type="ios-phone-portrait" :size="22" style="margin-top: -2px"/>
            下载APP
          </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name: 'HeaderTop',
    mounted(){
        this.init();
    },
    methods: {
        goLogin () {
          this.$router.push({path: '/my'})
        },
        login(){
            this.$router.push({path: '/login'})
        },
        register () {
            this.$router.push({path: '/phoneregister'})
        },

        init(){
            console.log( localStorage.type)
            if(localStorage.type==1){
                console.log( localStorage.type)
                this.$refs.person.style.display = 'inline-block';
                this.$refs.logout.style.display = 'inline-block';
                this.$refs.denglu.style.display = 'none';
                this.$refs.zhuce.style.display = 'none';
            }
        },
        logout(){
            let that=this;
            let person=this.$refs.person;
            let logout=this.$refs.logout;
            let denglu= this.$refs.denglu;
            let zhuce= this.$refs.zhuce
            this.$post('/api/user/logout',{},
            function (res) {
                console.log(68)
                var storage = window.localStorage;
                storage.clear()
                that.$Message.info(res.msg);
                person.style.display='none'
                logout.style.display='none'
                denglu.style.display='inline-block'
                zhuce.style.display='inline-block'
            }, function (errcode, errmsg) {
                that.$Message.info(errmsg);

            })


        }


    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  @import "../../style/style.less";
  .person,.logout{
      display: none;
  }
  .header-top {
    background-color: #f6f6f6;
    .container {
      height: 30px;
      line-height: 30px;
      span {
        cursor:pointer
      }
      .left-option {
        float: left;
      }
      .right-option {
        float: right;
        .download-app {
          color: @theme-color-dark;
          margin-left: 10px;
        }
      }
    }
  }

</style>
